<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>tiaojian</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
   <!-- 动态改变样式 -->
    <div id="app">
        <!-- 支持布尔，表达式，变量 -->
        <h2 v-show="bb">hahahaha</h2><br/>
        <button @click="bb = !bb">切换显示隐藏</button>

        <!-- 结构dom都没了 -->
        <h2 v-if="bb">hahahaha2</h2><br/>

        <!-- 多个一组判断,必须连续，不能打断，不能插入div，要不然就失效 -->
         <button @click="n++">n++</button>
         <div v-if="n===1">111</div>
         <div v-else-if="n===2">222</div>
         <div v-else-if="n===3">333</div>
         <div v-else>else</div>

         <!-- 多个独立 -->
         <div v-if="n===1">444</div>
         <div v-if="n===2">555</div>
         <div v-if="n===3">666</div>

         <!-- 脱掉最外面衣服 -->
        <template v-if="n===1">
            <h2>aaaa</h2>
            <h2>bbbb</h2>
            <h2>cccc</h2>

        </template>


    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                bb: 'true',
                n: 0
            },
            methods: {
                
            }
        })
        ;
    </script>

</body>
</html> 